<template>
  <div class="content">
    <div  style="
          width: 100%;
          height: 100%;
          position: fixed;
          top: 0;
          left: 0;
          background-color: rgba(0, 0, 0, 0.7);
          padding: 20px;
          display: flex;
          z-index:99999999;
          flex-direction: column;
          align-items: center;
          justify-content: center;"
          :append-to-body="true"
    >
      <div class="cover" v-loading="oppLoading">
        <div class="cover-top">
          <div class="top-left">
            <div class="sign"></div>
            <div class="title">{{title}}已注册{{count}}家，已发布岗位{{jobCount}}家</div>
          </div>
          <div class="top-right" @click="onCloseDialog">×</div>
        </div>
        <div>
          <div class="cover-bottom" v-if="tableData.length>0">
            <el-table :data="tableData" style="width: 100%;" >
              <el-table-column width="140"
                               prop="id"
                               label="序号"
              >
              </el-table-column>
              <el-table-column
                  prop="entName"

                  label="企业名称"
              >
              </el-table-column>
              <el-table-column
                  prop="demandCount"

                  label="岗位数量"
              >
              </el-table-column>
              <el-table-column
                  prop="deliver"
                  label="需求人数"
              >
              </el-table-column>
              <el-table-column
                  prop="gap"
                  label="简历投递量"
              >
              </el-table-column>
              <el-table-column label="缺口率">
                <template slot-scope="{row}">
                  <span  style="color: #ffffff;cursor: pointer;" :style="row.proportion>='50'?'color:red':''">{{row.proportion}}%</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope='scope'>
                  <span style="color: #ffffff;cursor: pointer;" @click="onShow(scope.row)">查看详情</span>
                </template>

              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="paging">
          <el-pagination
              background
              :page-size="limit"
              layout="prev, pager, next"
              prev-text="上一页"
              next-text="下一页"
              :total="count"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="this.page">
          </el-pagination>
        </div>
      </div>
    </div>
    <Modal v-if="isShow" @closeModal="isShow=false" :title="title"  width="1200px" height="400px">
      <CoverCom :title="entName" :areaId="id" :id="entId" :oncloseDialog2="oncloseDialog2" ></CoverCom>
    </Modal>
  </div>
</template>

<script>
import CoverCom from "@/components/Cover/CoverCom-10";
import {
  getDhKeynoteListApi,
} from "@/api/statistics6";
export default {
  components: {CoverCom},
  name: "CoverCom9",
  props:['id','oncloseDialog','title'],
  data() {
    return{
      oppLoading: false,
      count: 2,
      jobCount:0,
      page: 1,
      limit: 7,
      isShow: false,
      value: '',
      entName: '',
      entId: 0,
      tableData: [],
    }
  },
  methods:{
    onShow(val){
      this.isShow = true;
      this.entName = val.entName
      this.entId = val.id
    },
    onCloseDialog()
    {
      this.oncloseDialog(0)
    },
    oncloseDialog2(){
      this.isShow = false
    },

    handleSizeChange(e) {
      this.limit = e
      this.getList(this.id)
    },
    handleCurrentChange(e) {
      this.page = e
      sessionStorage.setItem('currentPage',this.page)
      this.getList(this.id)
    },
    getList(id){
      this.oppLoading = true
      // if(id == 1)
      // {
      getDhKeynoteListApi({page:this.page,limit:this.limit}).then((res)=>{
          if(res.code===200){
            this.tableData = res.data.list
            this.count=res.data.count
            this.jobCount = res.data.jobCount
          }
        }).finally(()=>{
          this.oppLoading = false
        })
      // }
      // if(id == 2)
      // {
      //   getKeynoteListApi({page:this.page,limit:this.limit}).then((res)=>{
      //     if(res.code===200){
      //       this.tableData = res.data.list
      //       this.count=res.data.count
      //       this.jobCount = res.data.jobCount
      //     }
      //   }).finally(()=>{
      //     this.oppLoading = false
      //   })
      // }
      // if(id == 3)
      // {
      //   getJtKeynoteListApi({page:this.page,limit:this.limit}).then((res)=>{
      //     if(res.code===200){
      //       this.tableData = res.data.list
      //       this.count=res.data.count
      //       this.jobCount = res.data.jobCount
      //     }
      //   }).finally(()=>{
      //     this.oppLoading = false
      //   })
      // }
      // if(id == 4)
      // {
      //   getGzKeynoteListApi({page:this.page,limit:this.limit}).then((res)=>{
      //     if(res.code===200){
      //       this.tableData = res.data.list
      //       this.count=res.data.count
      //       this.jobCount = res.data.jobCount
      //     }
      //   }).finally(()=>{
      //     this.oppLoading = false
      //   })
      // }
      // if(id == 5)
      // {
      //   getDhKeynoteListApi({page:this.page,limit:this.limit}).then((res)=>{
      //     if(res.code===200){
      //       this.tableData = res.data.list
      //       this.count=res.data.count
      //       this.jobCount = res.data.jobCount
      //     }
      //   }).finally(()=>{
      //     this.oppLoading = false
      //   })
      // }
      // if(id == 6)
      // {
      //   getYmKeynoteListApi({page:this.page,limit:this.limit}).then((res)=>{
      //     if(res.code===200){
      //       this.tableData = res.data.list
      //       this.count=res.data.count
      //       this.jobCount = res.data.jobCount
      //     }
      //   }).finally(()=>{
      //     this.oppLoading = false
      //   })
      // }
      // if(id == 7)
      // {
      //   getAksKeynoteListApi({page:this.page,limit:this.limit}).then((res)=>{
      //     if(res.code===200){
      //       this.tableData = res.data.list
      //       this.count=res.data.count
      //       this.jobCount = res.data.jobCount
      //     }
      //   }).finally(()=>{
      //     this.oppLoading = false
      //   })
      // }
      // if(id == 8)
      // {
      //   getSbKeynoteListApi({page:this.page,limit:this.limit}).then((res)=>{
      //     if(res.code===200){
      //       this.tableData = res.data.list
      //       this.count=res.data.count
      //       this.jobCount = res.data.jobCount
      //     }
      //   }).finally(()=>{
      //     this.oppLoading = false
      //   })
      // }
      this.oppLoading = false
    }
  },
  mounted() {
   this.getList(this.id)
    this.fairActive = this.id

  },

}
</script>

<style lang="scss" scoped>
.content{
  .cover{
    position: relative;
    width: 80%;
    min-height: 75%;
    height: auto;
    border-radius: 5px;
    border: 1px solid #07a6ff;
    background: rgba(4, 20, 59, 0.7);
    padding: 10px 20px 20px 20px;
    .cover-top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      .top-left{
        display: flex;
        .sign{
          background-color: #498CF3;
          width: 10px;
          height: 20px;
          border-radius: 15px;
          margin-right: 15px;
        }
        .title{
          color: #ffffff;
        }
      }
      .top-right{
        color: #2FA1F9;
        font-size: 40px;
        cursor: pointer;
        margin-right: 5px;
        width: 23px;
        height: 42px;
        padding-bottom: 20px;
      }
    }
    .cover-middle{
      display: flex;
      margin: 20px 0;
      .street{
        color: #ffffff;
        margin-right: 20px;
        ::v-deep{
          .el-input__icon{
            height: 116%;
          }
          .el-input__inner{
            display: flex;
            align-items: center;
            background-color: #0A1456;
            border: 1px solid #216CBB;
            height: 30px;
            width: 120px;
          }
          .el-select-dropdown__list{
            background-color: #0A1456;

          }
        }
      }
      .village{
        color: #ffffff;
        ::v-deep{
          .el-input__icon{
            height: 116%;
          }
          .el-input__inner{
            display: flex;
            align-items: center;
            background-color: #0A1456;
            border: 1px solid #216CBB;
            height: 30px;
            width: 120px;
          }
          .el-select-dropdown__list{
            background-color: #0A1456;

          }
        }
      }
    }
    .cover-bottom{
      width: 100%;
      height: calc(100% - 70px);
      overflow: hidden;
      ::v-deep{
        .el-table th.el-table__cell{
          background: rgb(33, 54, 81);
          border-bottom: 1px solid rgb(48, 63, 82);
          text-align: center;
          color: #fff;
        }
        .el-table tr{
          background: rgba(4, 20, 59, 0.7);
          border-bottom: 1px solid rgb(48, 63, 82);
        }
        .el-table .el-table__cell{
          background: rgba(4, 20, 59, 1.0);
          border-bottom: 1px solid rgb(48, 63, 82);
          text-align: center;
        }
        .el-table .cell{
          color: #fff;
        }
      }
    }
    .paging{
      display: flex;
      justify-content: center;
      margin: 0 0;
      ::v-deep{
        .el-pagination.is-background .btn-prev{
          background: rgb(33, 54, 81);
          border-bottom: 1px solid rgb(48, 63, 82);
          padding: 0 10px;
        }
        .el-pagination.is-background .btn-prev span{
          color: #fff;
        }
        .el-pagination.is-background .btn-next{
          background: rgb(33, 54, 81);
          border-bottom: 1px solid rgb(48, 63, 82);
          padding: 0 10px;
        }
        .el-pagination.is-background .btn-next span{
          color: #fff;
        }
      }
    }
  }
}
</style>
